<template>
  <div class="user-container">
    <permission-search-form v-on:update:search="searchChangeHandler"/>
    <div class="user-content">
      <div class="button-box clearfix">
        <el-button type="primary" icon="el-icon-plus" @click="goToAddPermission"> {{ $t('permission.addPermission') }} </el-button>
      </div>
      <permission-table :table-data="tableData" :total="total" :listLoading="isListLoading" v-on:update:search="searchChangeHandler"></permission-table>
    </div>
  </div>
</template>

<script>
  import { default as permissionTable } from "./permissionTable/index";
  import { default as permissionSearchForm } from "./permissionSearchForm//index";

  export default {
    name: "PermissionManagement",
    components: {
      permissionTable,
      permissionSearchForm
    },
    data() {
      return {
        tableData: [{
            "permission_id": 1,
            "name": "PermissionSeeder",
            "title": "权限管理",
            "condition": "",
            "pid": 0,
            "created_at": null,
            "updated_at": null,
            "children": [
                {
                    "permission_id": 2,
                    "name": "permission_index",
                    "title": "权限列表",
                    "condition": "",
                    "pid": 1,
                    "created_at": null,
                    "updated_at": null
                },
                {
                    "permission_id": 3,
                    "name": "permission_show",
                    "title": "权限详情",
                    "condition": "",
                    "pid": 1,
                    "created_at": null,
                    "updated_at": null
                },
                {
                    "permission_id": 4,
                    "name": "permission_store",
                    "title": "权限添加",
                    "condition": "",
                    "pid": 1,
                    "created_at": null,
                    "updated_at": null
                },
                {
                    "permission_id": 5,
                    "name": "permission_save",
                    "title": "权限修改",
                    "condition": "",
                    "pid": 1,
                    "created_at": null,
                    "updated_at": null
                },
                {
                    "permission_id": 12,
                    "name": "permission_del",
                    "title": "权限删除",
                    "condition": "",
                    "pid": 1,
                    "created_at": null,
                    "updated_at": null
                }
            ]
        }],
        total: 2,
        // 搜索条件
        searchCondition: {
          page: 1,
          limit: 10
        },
        // 用户列表是否加载中的标志位
        isListLoading: false
      }
    },
    created: function () {
      this.init()
    },
    methods: {
      // 组件初始化方法
      init() {
        this.getPermissionList()
      },
      searchChangeHandler: function(search) {
        // search 是子组件传来的值
        console.log("searchChangeHandler, search = ", search);
        this.searchCondition = Object.assign(this.searchCondition, search);
        console.log("searchCondition = ", this.searchCondition);

        this.getPermissionList()
      },
      // 根据条件查询权限列表
      getPermissionList: function() {
        this.isListLoading = true;
        this.$store
          .dispatch('getRolePermissionList', this.searchCondition)
          .then(data => {
            this.isListLoading = false;
            if (data['code'] === 0) {
              this.tableData = data['data'];
              this.total = data["data"]["total"] || 0;
            }
          })
          .catch((error) => {
            console.error('get role permission list has error:', error)
            this.isListLoading = false;
          })
      },
      /** 跳转到添加权限 */
      goToAddPermission() {
        this.$router.push({ path: 'addPermission' })
      },
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .user {
    &-container {
      margin: 30px;
    }
    &-content {
      max-width: 90%;
      margin: 10px auto;
      border-top: 1px solid #ccc;
      padding-top: 10px;
      .button-box {
        button {
          float: right;
        }
      }
    }
}
</style>
